<template>
  <div class="wallet-view">
    <van-nav-bar title="钱包" left-text="返回" left-arrow @click-left="router.back()" />
    <div class="icon">
      <van-icon name="gold-coin" size="200" color="#007AFF"/>
    </div>
    <div class="balance">
      余额：{{ userStore.Wallet }}
    </div>
    <div class="recharge">
      <van-cell-group inset>
        <van-field v-model="number" center clearable label="充值" placeholder="输入数字">
          <template #button>
            <van-button size="small" type="primary" @click="recharge">充值</van-button>
          </template>
        </van-field>
      </van-cell-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getWalletDate } from '../api';
import { useUserStore } from '../store';
// 创建实例
const router = useRouter();
const userStore = useUserStore();
// 响应式变量
let number = ref();
userStore.getWallet({status: "change", token: localStorage.getItem("token"), number: 0});
// 充值按钮
let recharge = async ()=>{
  await getWalletDate({status: "change", token: localStorage.getItem("token"), number: number.value});
  userStore.getWallet({status: "change", token: localStorage.getItem("token"), number: 0});
  number.value = "";
}

</script>

<style scoped>
.wallet-view {
  .icon {
    margin: 20px auto;
    text-align: center;
  }

  .balance {
    text-align: center;
    font-size: 30px;
  }

  .recharge{
    margin-top: 20px;
  }
}
</style>
